import React,{useState,useEffect} from 'react'
import api from '../../http/api'
import './userList.css'
import {useNavigate,Link} from 'react-router-dom'

export default function UserList() {
  const [list,setList]=useState([])
  const navigate=useNavigate()
  const getAccountListApi=async()=>{
    let result=await api.users.getAccountList()
    console.log(result.data.data);
    setList(result.data.data)
  }
  useEffect(()=>{
    getAccountListApi()
  },[])

  const goUserDatail=(_id)=>{
    console.log(_id);
    navigate(`/userDetail?_id=${_id}`)
  }

  return (
    <div>
        <h1>用户管理</h1>
        <table>
          <thead>
            <tr>
              <td>编号</td>
              <td>姓名</td>
              <td>邮箱</td>
              <td>图像</td>
              <td>状态</td>
              <td>操作</td>
            </tr>
          </thead>
          <tbody>
            {
              list.map((item,index)=><tr key={item._id}>
               
                <td>{index+1}</td>
                <td>{item.account}</td>
                <td>{item.email}</td>
                <td><img src={item.imgUrl} className="headImg"/></td>
                <td>{item.state==1?'正常':'锁定'}</td>
              
                <td>
                     <button onClick={()=>{goUserDatail(item._id)}}>查看</button>
                     <Link to={"/userDetail2/"+item._id}>查看</Link>
                </td>
              </tr>)
            }
          </tbody>
        </table>
    </div> 
  )
}
